<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- Meta, title, CSS, favicons, etc. -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>下单页面 </title>

	<!-- Bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!-- Font Awesome -->
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<!-- NProgress -->
	<!--<link href="css/nprogress.css" rel="stylesheet">-->

	<!-- Custom Theme Style -->
	<link href="css/custom.min.css" rel="stylesheet">

</head>

<body class="nav-md">
<div class="container body">
	<div class="main_container">
		<div id="head">
		</div>

		<!-- top navigation -->

		<!-- /top navigation -->
		<!-- page content -->
		<div class="right_col" role="main">
			<div class="">
				<div class="page-title">
					<div class="title_left">
						<h3 style="color: green;">生成订单</h3>
					</div>

					<div class="title_right">
						<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">

						</div>
					</div>
				</div>
				<div class="clearfix"></div>

				<div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12">
						<div class="x_panel">
							<div class="x_title">

								<div class="clearfix" style="text-align: center;"><span style="font-size: 25px;color: #000000;">我要寄件</span></div>
							</div>
							<div class="x_content">

								<form class="form-horizontal form-label-left" novalidate id="formItems" method="post">


									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12" for="senderName">寄件人姓名 <span class="required">*</span>
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<input id="senderName" class="form-control col-md-7 col-xs-12"
												   name="senderName" placeholder="请填写寄件人姓名" required="required" type="text" maxlength="12">
										</div><span class="senderNameC chickComment"></span>
									</div>
									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12" for="aPhone">寄件人手机号 <span class="required">*</span>
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<input type="tel" id="aPhone" name="aPhone" maxlength="11" placeholder="手机号只能是13,14，15,17,18开头的十一位" required="required" class="form-control col-md-7 col-xs-12">
										</div><span class="aPhoneC chickComment"></span>
									</div>
									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12" >寄件人所在区域 <span class="required">*</span>
										</label>
										<!--地区三级联动-->
										<div class=" col-xs-9" >
											<select  id="s_province" name="s_province"  style="padding: 6px 2px;" ></select>

											<select id="s_city" name="s_city"  style="padding: 6px 2px;"></select>

											<select id="s_county" name="s_county"  style="padding: 6px 2px;"></select>

											<input type="hidden" id="city" name="city" value=""/>
											<input type="hidden" id="flag" value=""></input>
											<span class="cityC chickComment"></span>
										</div>
									</div>
									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12" for="address">寄件人详细地址 <span class="required">*</span>
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<textarea id="address" required="required" name="address" placeholder="请填写寄件人详细地址" maxlength="100" class="form-control col-md-7 col-xs-12"></textarea>
										</div><span class="addressC chickComment"></span>
									</div>
									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12" for="goodDescription">货物描述 <span class="required">*</span>
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<input type="text" id="goodDescription" name="goodDescription" required="required" maxlength="100" placeholder="请填写货物描述" class="form-control col-md-7 col-xs-12">
										</div><span class="goodDescriptionC chickComment"></span>
									</div>
									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12" for="goodWeight">货物重量 <span class="required">*</span>
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<input type="text" id="goodWeight" name="goodWeight" required="required" maxlength="9" placeholder="请填写货物重量,只能是整数 单位:kg" class="form-control col-md-7 col-xs-12">
										</div><span class="goodWeightC chickComment"></span>
									</div>
									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12" for="goodVolume">货物体积 <span class="required">*</span>
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<input type="text" id="goodVolume" name="goodVolume" required="required" maxlength="9" placeholder="请填写货物体积,只能是整数 单位:m³" class="form-control col-md-7 col-xs-12">
										</div><span class="goodVolumeC chickComment"></span>
									</div>
									<div class="item form-group">
										<label for="country" class="control-label col-md-3">寄往国家</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<input id="country" type="text" name="country" placeholder="请填写寄往国家" maxlength="9" data-validate-length="6,8" class="form-control col-md-7 col-xs-12"
												   required="required">
										</div><span class="countryC chickComment"></span>
									</div>
									<div class="item form-group">
										<label for="recipients" class="control-label col-md-3 col-sm-3 col-xs-12">收件人姓名</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<input id="recipients" type="text" name="recipients" maxlength="9" placeholder="请填写收件人姓名"
												   class="form-control col-md-7 col-xs-12" required="required">
										</div><span class="recipientsC chickComment"></span>
									</div>
									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12" for="bPhone">收件人手机号 <span class="required">*</span>
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<input type="tel" id="bPhone" name="bPhone" maxlength="11" placeholder="手机号只能是13,14，15,17,18开头的十一位" required="required"
												   data-validate-length-range="8,20" class="form-control col-md-7 col-xs-12">
										</div><span class="bPhoneC chickComment"></span>
									</div>
									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12" for="addressee">收件人详细地址 <span class="required">*</span>
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<textarea id="addressee" required="required" name="addressee" maxlength="90" placeholder="请填写收件人详细地址" class="form-control col-md-7 col-xs-12"></textarea>
										</div><span class="addresseeC chickComment"></span>
									</div>
									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12">付款方式 <span class="required">*</span>
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<select required="required" name="custype" id="custype">
												<option value="">请选择</option>
												<option value="1">现结</option>
												<option value="2">到付</option>
											</select>
										</div><span class="custypeC chickComment"></span>
									</div>
									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12">运输方式 <span class="required">*</span>
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<select required="required" name="shippingType" id="shippingType">
												<option value="">请选择</option>
												<option value="1">海运</option>
												<option value="2">空运</option>
											</select>
										</div><span class="shippingTypeC chickComment"></span>
									</div>
									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12" >附加服务
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<label><input  id="insure" type="checkbox" />保价服务 </label>
											<label><input name="selfServices" type="checkbox" />自取服务 </label>
										</div>
									</div>
									<div class="item form-group" style="display: none;" id="insure2">
										<label class="control-label col-md-3 col-sm-3 col-xs-12" >投保险别
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<select  name="addServices" id="addServices">
												<option value="" >请选择</option>
												<option value="1000">平安险</option>
												<option value="200">偷窃提货不着险</option>
												<option value="800">碰损、破碎险</option>
												<option value="100">短量险</option>
											</select>
										</div>
									</div>
									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12" for="remarks">备注
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<input id="remarks" type="text" name="remarks" maxlength="90" data-validate-length-range="5,20" class="optional form-control col-md-7 col-xs-12">
										</div>
									</div>
									<div class="ln_solid"></div>
									<div class="form-group">
										<div class="col-md-6 col-md-offset-3">
											<a  class="btn btn-success" id="pay" href="javascript:;" onclick="orderFormItems()" >下单</a>
											<a class="btn btn-primary" onclick="window.history.back(-1)">返回</a>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /page content -->

		<!-- footer content -->
		<footer>
			<div class="pull-right">
				Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
			</div>
			<div class="clearfix"></div>
		</footer>
		<!-- /footer content -->
	</div>
</div>

<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="js/fastclick.js"></script>
<!-- NProgress -->
<script src="js/nprogress.js"></script>
<!--地区三级联动area.ui.js-->
<script src="js/area.ui.js"></script>
<!-- Custom Theme Scripts -->

<!-- validator -->
<script>
    var $token=window.sessionStorage.getItem('token');
    function orderFormItems(){

        $(".chickComment").css("color","red");
        if($("#senderName").val()==""||$.trim($("#senderName").val()).length==0){
            $(".senderNameC").html("请填写寄件人姓名");
            return false;
        }else{
            $(".senderNameC").html("");
        }
        if ($(".aPhone").val()!=""){
            if(!(/^1(3|4|5|7|8)\d{9}$/.test($("#aPhone").val()))){
                $(".aPhoneC").html("寄件人手机号有误！");
                return false;
            }else{
                $(".aPhoneC").html("");
            }
        }else {
            $(".aPhoneC").html("寄件人手机不能为空！");
            return false;
        }
        if($("#city").val()==""||$.trim($("#city").val()).length==0||$("#flag").val()!="true"){
            $(".cityC").html("请填写寄件人所在区域到第三个下拉框");
            return false;
        }else{
            $(".cityC").html("");
        }
        if($("#address").val()==""||$.trim($("#address").val()).length==0){
            $(".addressC").html("请填写寄件人详细地址");
            return false;
        }else{
            $(".addressC").html("");
        }
        if($("#goodDescription").val()==""||$.trim($("#goodDescription").val()).length==0){
            $(".goodDescriptionC").html("请填写货物描述");
            return false;
        }else{
            $(".goodDescriptionC").html("");
        }
        if((/^\d{1,6}$/.test($("#goodWeight").val()))){
            $(".goodWeightC").html("");
        }else{
            $(".goodWeightC").html("货物重量只能是正整数 如：6kg");
            return false;
        }
        if((/^\d{1,6}$/.test($("#goodVolume").val()))){
            $(".goodVolumeC").html("");
        }else{
            $(".goodVolumeC").html("货物体积只能是正整数 如：6m³");
            return false;
        }
        if($("#country").val()==""||$.trim($("#country").val()).length==0){
            $(".countryC").html("请填写寄往国家 如:澳大利亚");
            return false;
        }else{
            $(".countryC").html("");
        }
        if($("#recipients").val()==""||$.trim($("#recipients").val()).length==0){
            $(".recipientsC").html("请填写收件人名字 如:王某某");
            return false;
        }else{
            $(".recipientsC").html("");
        }
        if ($("#bPhone").val()!=""){
            if(!(/^1(3|4|5|7|8)\d{9}$/.test($("#bPhone").val()))){
                $(".bPhoneC").html("收件人手机号有误！");
                return false;
            }else{
                $(".bPhoneC").html("");
            }
        }else {
            $(".bPhoneC").html("收件人手机不能为空！");
            return false;
        }
        if($("#addressee").val()==""||$.trim($("#addressee").val()).length==0){
            $(".addresseeC").html("请填写收件人详细地址");
            return false;
        }else{
            $(".addresseeC").html("");
        }
        if($("#custype").val()==""||$.trim($("#custype").val()).length==0){
            $(".custypeC").html("请填写付款方式");
            return false;
        }else{
            $(".custypeC").html("");
        }
        if($("#shippingType").val()==""||$.trim($("#shippingType").val()).length==0){
            $(".shippingTypeC").html("请填写运输方式");
            return false;
        }else{
            $(".shippingTypeC").html("");
        }


        if ($("#senderName").val()!=""&& $("#aPhone").val()!=""&& $("#city").val()!=""&& $("#address").val()!=""&&
            $("#goodDescription").val()!=""&& $("#goodWeight").val()!=""&& $("#goodVolume").val()!=""&&
            $("#country").val()!=""&&$("#recipients").val()!=""&& $("#bPhone").val()!=""&&
            $("#addressee").val()!=""&&$("#custype").val()!=""&& $("#shippingType").val()!=""){
            $.ajax({
                xhrFields:{withCredentials:true},
                type:"post",
                url:"http://localhost:8081/OrderController/insertOrder?token="+$token,
                data:$("#formItems").serialize(),
                dataType:"json",
                success:function(data){
                    if(data.message=='yes'){
                    window.location.href="cus_order_info.html";
                    }else if(data.message=='noadd'){
                       alert("该国家还没开通服务");
                    }else{
                        alert("下单失败");
					}
                },error:function() {
                    alert("网络异常!");
                }
            });
        }else{
            alert("请检查表单信息是否填写完整！");
        }



    }

    $(document).ready(function() {
        var $lw1 = $("#insure");
        $lw1.click(function() {
            if ($lw1.is(":checked")) {
                $("#insure2").css("display", "block");
            } else {
                $("#insure2").css("display", "none");
                $("#se").prop('selected',true);
            }

        });
        $("#head").load("head.html");

    });
    // initialize the validator function
    // validator.message.date = 'not a real date';

    // validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
    // $('form')
    //     .on('blur', 'input[required], input.optional, select.required', validator.checkField)
    //     .on('change', 'select.required', validator.checkField)
    //     .on('keypress', 'input[required][pattern]', validator.keypress);
    //
    // $('.multi.required').on('keyup blur', 'input', function() {
    //     validator.checkField.apply($(this).siblings().last()[0]);
    // });
    //
    // $('form').submit(function(e) {
    //     e.preventDefault();
    //     var submit = true;
    //
    //     // evaluate the form using generic validaing
    //     if (!validator.checkAll($(this))) {
    //         submit = false;
    //     }
    //
    //     if (submit)
    //         this.submit();
    //
    //     return false;
    // });

    //地区三级联动开始
    $(function(){
        $(document).area("s_province","s_city","s_county");//调用插件
        var str="";
        var str2="";

        $('#s_province').change(function(){
            $('#s_province').children().each(function(){
                if($(this).prop('selected')==true){
                    str="";
                    str=$(this).html();
                    $('#city').val(str);
                    $('#flag').val("");
                    document.getElementById("address").setAttribute("placeholder","如:"+str+"XX市XX区小花路13号");
                }
            });

        });
        $('#s_city').change(function(){
            $('#s_city').children().each(function(){
                if($(this).prop('selected')==true){
                    str2=$(this).html();
                    $('#city').val(str+$(this).html());
                    $('#flag').val("");
                    document.getElementById("address").setAttribute("placeholder","如:"+str+$(this).html()+"XX区小花路13号");
                }
            });

        });
        $('#s_county').change(function(){
            $('#s_county').children().each(function(){
                if($(this).prop('selected')==true){
                    $('#city').val(str+str2+$(this).html());
                    $('#flag').val("true");
                    document.getElementById("address").setAttribute("placeholder","如:"+str+str2+$(this).html()+"小花路13号");
                }
            });


        });});

    //地区三级联动结束




</script>
<!-- /validator -->
</body>
</html>
